
<template>
  <router-view/>
  <div class="bg">
    <div class="box">
      <div class="box_top">
        <img src="../assets/imgs/logo.png" height="70" width="350"/>
      </div>
      <div class="box_bottom">
        <el-form
            ref="loginFormRef"
            :model="loginForm"
            :rules="loginRules"
            label-width="80px"
        >
          <el-form-item label="" prop="username">
            <el-input
                v-model="loginForm.username"
                style="width: 350px;height: 55px;font-size: 18px"
                placeholder="用户名/邮箱"
                :prefix-icon="User"
                clearable
            />
          </el-form-item>
          <el-form-item label="" prop="password">
            <el-input
                v-model="loginForm.password"
                style="width: 350px;height: 55px;font-size: 18px"
                placeholder="密码"
                :prefix-icon="Lock"
                show-password
            />
          </el-form-item>
          <el-form-item   >
            <el-button type="primary" @click="submitForm"
                       style="width: 300px;
                    height: 50px;
                    font-size: 20px;
                    letter-spacing: 15px;
                    border-radius: 20px;
                    font-weight: bold; margin-top: 30px;margin-left: 5%">登录</el-button>
          </el-form-item>
          <el-form-item   >
            <el-button type="info" @click="cancleBtn"
                       style="width: 300px;
                    height: 50px;
                    font-size: 20px;
                    letter-spacing: 15px;
                    border-radius: 20px;
                    font-weight: bold;margin-left: 5% ">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import {User,Lock} from "@element-plus/icons";
import {reactive, ref} from "vue";
import { useRouter } from "vue-router";
const router = useRouter() ;
import request from "@/utils/request";
import {ElMessage} from "element-plus";
// 表单引用
const loginFormRef = ref()
// 表单的数据模型
const loginForm = reactive({
  username : '' ,
  password : ''
})
// 表单的校验规则
const loginRules = reactive({
  username: [
    { required: true, message: '必须填写账号', trigger: 'blur' },
    { min: 2, max: 20, message: '账号长度为2-20', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '必须填写密码', trigger: 'blur' },
    /*{ min: 6, message: '账号长度至少6位', trigger: 'blur' },*/
    { pattern : /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,}$/ ,
      message: '密码必须是数字和字母相结合，长度至少6位！',
      trigger: 'blur' },
  ],
})
//登录按钮
const submitForm=()=>{
  loginFormRef.value.validate((valid, fields) => {
    if (valid) {
      //正常登录
      request({
        url :'/sys/user/login',
        method:'POST',
        params:loginForm,
      }).then(res=>{
        if(200 == res.data.errorCode) {
          sessionStorage.setItem('username', JSON.stringify(res.data.data))
          router.push('/main')
        }else {
          ElMessage({
            message: res.data.msg,
            type: 'error',
          })
          //异常登录
          request({
            method:"POST",
            url:'/sys/user/loginexp'
          }).then(res=>{})
        }
      })
    }
  })
}
//取消按钮
const cancleBtn=()=>{
  router.push("/")
}


</script>

<style scoped>
.bg{
  width: 100%;
  height: 100%;
  background-image: url("../assets/imgs/background2.jpg");
  background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
  position: absolute; /* 不可缺少 */
  z-index: -1;
  background-repeat: no-repeat;
}
.box{
  margin-top: 100px;
  margin-left: 35%;
  width: 500px;
  height: 500px;
  border-radius: 20px;
  color: black;
  background: rgba(222,222,221,0.85);
}
.box_top{
  padding-top: 40px;
}
.box_bottom{
  padding-top: 40px;
}

</style>